var  lazy={
    flag:1,
    isInsight:function(el){
        //表示图片到可视区域距离，top、right、botton、left、width、height
        const bound=el.getBoundingClientRect();
        //可视区域的高度
        const clientHeight=window.innerHeight;
        //当图片到可视区域顶部距离越来越小的时候，也就是他马上就要出现在可视区域，从下到上
        return bound.top<=clientHeight+100;//离底部100时就开始加载。
    },
    checkImgs:function(){
        this.flag=1;
        const imgs=document.querySelectorAll(".img");
        Array.from(imgs).forEach(el=>{
            if(lazy.isInsight(el)){
                lazy.loadImg(el);
            }
        })
    },
    loadImg:function(el){
        if(!el.flag){
            const source=el.getAttribute("data-src");
            el.src=source;
            el.flag=true;
        }
    }
}
window.onscroll=function(){
    if(!lazy.flag){
        return;
    }
    lazy.flag=0;
    setTimeout(lazy.checkImgs,1000);
}